<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/project.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <title>Document</title>
</head>

<body>
    <!-- 头部网页 -->
    <div class="header-c">
        <div class="ima">
            <img src="img/img1/1.png" alt="">
        </div>
        <div class="nav">
            <ul>
                <li>
                    <a href="index.html">首页</a>
                    <div class="line"></div>
                </li>
                <li class="one">
                    <a href="project.html">项目案例</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="join.html">加入我们</a>
                    <div class="line"></div>
                </li>
                <li>
                    <a href="contact.html">联系我们</a>
                    <div class="line"></div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部手机 -->
    <div class="header-m">
        <div class="ima">
            <img src="img/img1/1.png" alt="">
        </div>
        <div class="icon">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
        <div class="show">
            <div class="show-item"><a href="./index.html">首页</a></div>
            <div class="show-item"><a href="./project.html">项目案例</a></div>
            <div class="show-item"><a href="./join.html">加入我们</a></div>
            <div class="show-item"><a href="./contact.html">联系我们</a></div>
        </div>
    </div>
    <div class="local"></div>
    <div class="jieshao">
        <h2>项目案例介绍</h2>
        <p>Effective case</p>
    </div>
    <!-- 案例网页 -->
    <div class="anli">
        <div class="fenlei">
            <ul class="clear">
                <li class="act">全部</li>
                <li>网站</li>
                <li>小程序</li>
                <li>APP</li>
            </ul>
        </div>
        <div class="item">
            <div class="one">
                <img class="ima" src="img/img1/11.png" alt="">
                <h4>马克叔叔摄影网站</h4>
                <p>摄影摄像行业</p>
            </div>
            <div class="one">
                <img class="ima" src="img/img1/12.png" alt="">
                <h4>造物电商网页设计</h4>
                <p>电子商务行业</p>
            </div>
            <div class="one">
                <img class="ima" src="img/img1/13.png" alt="">
                <h4>东方航空员工考勤系统</h4>
                <p>后台管理系统</p>
            </div>
            <div class="one">
                <img class="ima" src="img/img1/14.png" alt="">
                <h4>马克叔叔摄影网站</h4>
                <p>摄影摄像行业</p>
            </div>
            <div class="one">
                <img class="ima" src="img/img1/15.png" alt="">
                <h4>造物电商网页设计</h4>
                <p>电子商务行业</p>
            </div>
        </div>
    </div>
    <!-- 案例手机 -->
    <div class="anli-m">
        <div class="text">
            <ul class="fenlei">
                <li class="one act">全部</li>
                <li>网站</li>
                <li>小程序</li>
                <li>APP</li>
            </ul>
        </div>
        <div class="item">
            <div class="kapian">
                <div class="one">
                    <img class="ima" src="img/img1/11.png" alt="">
                    <h4>马克叔叔摄影网站</h4>
                    <p>摄影摄像行业</p>
                </div>
                <div class="one">
                    <img class="ima" src="img/img1/12.png" alt="">
                    <h4>造物电商网页设计</h4>
                    <p>电子商务行业</p>
                </div>
                <div class="one mar">
                    <img class="ima" src="img/img1/13.png" alt="">
                    <h4>东方航空员工考勤系统</h4>
                    <p>后台管理系统</p>
                </div>
                <div class="one two">
                    <img class="ima" src="img/img1/14.png" alt="">
                    <h4>马克叔叔摄影网站</h4>
                    <p>摄影摄像行业</p>
                </div>
                <div class="one two">
                    <img class="ima" src="img/img1/15.png" alt="">
                    <h4>造物电商网页设计</h4>
                    <p>电子商务行业</p>
                </div>
                <div class="one mar two">
                    <img class="ima" src="img/img1/16.png" alt="">
                    <h4>东方航空员工考勤系统</h4>
                    <p>后台管理系统</p>
                </div>
            </div>
        </div>
        <ul class="zuoyou">
            <li class="active">
                <p>&lt;</p>
            </li>
            <li class="">
                <p>&gt;</p>
            </li>
        </ul>
    </div>
    <!-- 底部网页 -->
    <div class="footer">
        <div class="up">
            <div class="up-c">
                <div class="lianxi">
                    <span class="one">联系我们</span>
                    <span>Contact Us</span>
                </div>
                <div class="bufan">
                    <img src="img/img1/18.png" alt="">
                    <p>郑州不凡科技有限公司</p>
                </div>
                <div class="dizhi">地址：郑东新区绿地新都会6号楼1210 <br>
                    电话：0371-55602883 <br>
                    手机：18838180363</div>
                <div class="luxian">
                    路线：地铁1号线 东风南路站C口出向北步行300米(近郑州东站) <br>
                    郵编：450000 <br>
                    邮箱：bd@bufanui.com
                </div>
            </div>
        </div>
        <div class="down">
            <div class="down-c">
                ©2017不凡科技 郑州IT技术服务 豫ICP备17015347号
            </div>
        </div>
    </div>
    <!-- 底部手机 -->
    <div class="footer-m">
        <h1>联系我们</h1>
        <p class="ename">Contact Us</p>
        <img src="img/img1/18.png" alt="">
        <p class="name">郑州不凡科技有限公司</p>
        <div class="dizhi">地址：郑东新区绿地新都会6号楼1210 <br>
            电话：0371-55602883 <br>
            手机：18838180363</div>
        <div class="luxian">
            路线：地铁1号线 东风南路站C口出向北步行300米
            <br> (近郑州东站) <br>
            郵编：450000 <br>
            邮箱：bd@bufanui.com
        </div>
        <div class="down">
            <div class="down-c">
                <span class="one">©2017不凡科技 郑州IT技术服务 </span>
                <span class="two">豫ICP备17015347号</span>
            </div>
        </div>
    </div>
    <script src="./jquery.js"></script>
    <script>
        // 顶部右上角
        var click = false
        $('.header-m .icon').click(function () {
            click = !click;
            if (click) {
                $('.show').slideDown(400);
                $(".local").css({
                    'height':'228px'
                })
            } else {
                $('.show').slideUp(400);
                $(".local").css({
                    'height':'60px'
                })
            }
            $(this).toggleClass('act')
        })
        // 分类点击区域 
        var count = 0
        $('.anli-m .fenlei').on('click', 'li', function () {
            $('.act').removeClass('act')
            $(this).addClass('act')
            count = $(this).index()
            $('.anli-m .item .kapian').css({
                "left": -$(this).index() * 375
            })
        })

        $('.anli-m .zuoyou').on('click', 'li', function () {
            $('.active').removeClass('active')
            $(this).addClass('active')
            if ($(this).index() == 1) {
                if (count == 3) {
                    return
                } else {
                    count++;
                    $(".anli-m .item .kapian").css({
                        'left': -375 * count
                    })
                }
            } else {
                if (count == 0) {
                    return
                } else {
                    count--;
                    $(".anli-m .item .kapian").css({
                        'left': -375 * count
                    })
                }
            }

        })


        var html = $('.anli-m .item .kapian').html();
        for (var i = 0; i < 1; i++) {
            html = html + html
        }
        var html1 = $('.anli .item').html();
        console.log(html1);
        for (var i = 0; i < 3; i++) {
            html1 = html1 + html1
        }
        var kongbai = '';
        for (var i = 0; i < 10; i++) {
            kongbai += '<div class="kong"></div>'
        }
        console.log(kongbai);
        html1 = html1 + kongbai
        $('.anli-m .item .kapian').html(html)
        $('.anli .item').html(html1)

        $('.anli .clear').on('click', 'li', function () {
            $(".act").removeClass('act')
            $(this).addClass('act')

            $('.anli .item').css({
                left: -1200 * $(this).index()
            })
        })
    </script>
</body>

</html>